<template>
  <div class="elesign-page tc">
    <p class="tc title">请在虚线框内进行签名</p>
    <div class="elesign-code">
      <ElesignCode ref="signCode" />
    </div>
    <div class="elesign-btn-list">
      <a-space>
        <a-button type="danger" size="small" @click="reset()">清空</a-button>
        <a-button type="primary" size="small" @click="generateImages()"
          >完成</a-button
        >
        <a-button type="dashed" size="small" @click="revocation()"
          >撤销</a-button
        >
      </a-space>
    </div>
  </div>
</template>
<script>
import ElesignCode from "elesigncode/lib/core/elesigncode.vue";
export default {
  components: {
    ElesignCode
  },
  data() {
    return {};
  },
  created() {},

  methods: {
    //生成png图片
    generateImages() {
      this.resultImg = this.$refs.signCode.toPng();
      this.$emit("onCancelModal");
      this.$refs.signCode.signcodeEx.clear();
    },
    //清空
    reset() {
      this.$refs.signCode.signcodeEx.clear();
    },
    //撤销
    revocation() {
      this.$refs.signCode.undo();
    }
  }
};
</script>

<style lang="scss" scoped>
.elesign-code {
  box-sizing: content-box;
  margin: 0 auto;
  width: 600px;
  height: 200px;
  border: 1px dashed #e6eaee;
}
.elesign-btn-list {
  margin: 20px;
  ::v-deep.ant-btn {
    font-size: 12px;
  }
}
</style>
